<template>
  <div
    class="shortcutsCard flex-col-center p-12px border-1px border-[#efeff5] dark:border-[#ffffff17] rounded-4px hover:shadow-lg cursor-pointer relative overflow-hidden">
    <Icon :icon="formData.icon" :style="{ color: formData.color }" class="text-30px" />
    <p class="py-8px text-16px">{{ formData.name }}</p>
    <div class="moreAction Edit" @click.stop="handlerEdit(formData)">编辑</div>
    <div class="moreAction Del" @click.stop="handlerDel(formData)">删除</div>
  </div>

</template>

<script setup lang="ts" >
import { Icon } from '@iconify/vue';
import { QuickLink } from '.';
import { useDialog } from 'naive-ui'
const dialog = useDialog()
defineOptions({ name: 'DashboardWorkbenchMainShortcutsCard' });
const emit = defineEmits(["edit", "del"])
interface Props {
  formData: QuickLink
}

function handlerEdit(row: QuickLink) {
  emit("edit", row)
}

function handlerDel(row: QuickLink) {
  dialog.info({
    title: '警告',
    content: '是否确定删除快捷操作?',
    positiveText: '确定',
    negativeText: '不确定',
    onPositiveClick: () => {
      emit("del", row)
    }
  })
  
}


defineProps<Props>();
</script>

<style scoped>
.moreAction {
  width: 50px;
  height: 50px;
  line-height: 50px;
  color: aliceblue;
  text-align: center;
}
.shortcutsCard:hover .Edit{
  left: -10px;
  top: -13px;
  transition-duration: 0.5s;
  transition-timing-function: easy-in-out;
}
.shortcutsCard:hover .Del{
  right: -10px;
  bottom: -13px;
  transition-duration: 0.5s;
  transition-timing-function: easy-in-out;
}

.Edit {
  background-color: rgb(210, 252, 242);
  color: rgb(5, 150, 105);
  position: absolute;
  left: -50px;
  top: -50px;
  border-radius: 0% 50% 50% 50%;
}

.Del {
  background-color: rgb(255, 231, 233);
  color: rgb(225, 29, 72);
  position: absolute;
  right: -50px;
  bottom: -50px;
  border-radius: 50% 50% 0% 50%;
}
</style>
